<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="培训"></u-navbar>
		<view class="d-p-30" v-if="count">
			<view><text class="d-font-36" style="font-weight: bold;">培训概览</text></view>

			<view class="card d-m-t-30 d-p-30">
				<view class="d-flex" style="color: #5D6672;">
					<view class="d-flex-1 d-flex d-font-28">
						<text class="d-flex-1" style="font-weight: bold;">培训次数</text>
						<text class="d-m-l-20" style="font-weight: bold;color: #162233;">{{ count.value }}次</text>
					</view>
				</view>
				<view class="d-flex d-m-t-20" style="color: #5D6672;">
					<view class="d-flex-1 d-flex d-font-28">
						<text class="d-flex-1" style="font-weight: bold;">累积人次</text>
						<text class="d-m-l-20" style="font-weight: bold;color: #162233;">{{ count.staffs }}人</text>
					</view>
				</view>
			</view>
			<view class="d-m-t-30"><text class="d-font-36" style="font-weight: bold;">培训项目</text></view>
			<template v-if="!trains || trains.length <= 0">
				<view class="card d-m-t-20 d-p-80"><u-empty mode="list" icon="/static/image/none.png" text="暂无记录"></u-empty></view>
			</template>
			<template v-else>
				<view class="card d-m-t-30 d-p-30" v-for="(item, index) in trains" :key="index" @click="trainDetail(item)">
					<view class="d-m-b-20 d-flex">
						<view class="d-font-28 d-flex-1 u-line-1" style="font-weight: bold;">{{ item.xmmc }}</view>
						<!-- <view>
							<u-button
								text="查看"
								size="mini"
								type="info"
								shape="circle"
								:customStyle="{
									color: '#FFB61D',
									borderColor: '#FFB61D'
								}"
								@click="trainDetail(item)"
							></u-button>
						</view> -->
					</view>
					<view class="d-flex" style="color: #5D6672;">
						<view class="d-flex-1 d-font-28">
							<text style="">培训内容</text>
							<text class="d-m-l-20" style="color:#162233;">{{ item.kcmc }}</text>
						</view>
						<view class="d-flex-1 d-font-28">
							<text style="">开始时间</text>
							<text class="d-m-l-20" style="color:#162233;">{{ $moment(item.pxksrq).format('YYYY-MM-DD') }}</text>
						</view>
					</view>
					<view class="d-flex d-m-t-20" style="color: #5D6672;">
						<view class="d-flex-1 d-font-28">
							<text style="">培训人数</text>
							<text class="d-m-l-20" style="color:#162233;">{{ item.pxrs }}人</text>
						</view>
						<view class="d-flex-1 d-font-28">
							<text style="">结束时间</text>
							<text class="d-m-l-20" style="color:#162233;">{{ $moment(item.pxjsrq).format('YYYY-MM-DD') }}</text>
						</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
import { getAppto, getTrains } from '../../../common/api.js';
export default {
	data() {
		return {
			count: null,
			trains: null
		};
	},
	onLoad() {
		this.init();
	},
	methods: {
		init() {
			getAppto().then(e => {
				this.count = e.data;
				if (!this.$user.ssgcxx) {
					return false;
				}
				getTrains({
					params: {
						bzid: this.$user.ssgcxx[this.$appIndex].bzid, // 班组id
						rybh: this.$user.ssgcxx[this.$appIndex].rybh // 人员id
					}
				}).then(e => {
					this.trains = e.data;
				});
			});
		},
		trainDetail(item) {
			// 这个看看 项目端 怎么做的
			// return uni.$u.toast('暂无培训详情接口');
			uni.$u.route({
				url: '/pages/index/train/trainDetail',
				params: {
					id: item.id
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fbfcfc;
	.card {
		box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		background-color: #ffffff;
	}
}
</style>
